<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="tab1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: none">内容一</p>
        <p style="display: none">内容二</p>
        <p style="display: none">内容三</p>
    </div>
    <div class="tab2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p>内容一</p>
        <p style="display: none">内容二</p>
        <p style="display: none">内容三</p>
    </div>

    <button class="nextPre">点击我下一页</button>
    <button class="autoPlay">点击我第二个选项卡自动轮播</button>
</body>
<script>
    ; (function () {
        function Tabs() {
            let arr = Array.from(arguments);

            this.el = document.querySelector('.' + arr[0]);
            if (!this.el) {
                alert('el找不到');
                return;
            }

            this.btns = this.el.querySelectorAll('button');
            this.ps = this.el.querySelectorAll('p');
            this.curIndex = 0;
            this.timer = null;

            this.initNode();
        }

        Tabs.prototype.initNode = function () {
            let btns = this.btns;
            let ps = this.ps;

            btns.forEach((item, index) => {
                if (this.curIndex === index) {
                    item.style.background = 'red';
                    ps[this.curIndex].style.display = 'block';
                } else {
                    item.style.background = 'none';
                    ps[index].style.display = 'none';
                }
                item.onclick = function () {
                    this.curIndex = index;
                    this.initNode();
                }.bind(this);
            })
        }

        function addIndex() {
            this.curIndex++;
            if (this.curIndex === this.btns.length) {
                this.curIndex = 0;
            }
            this.initNode();
        }

        Tabs.prototype.clickNext = function () {
            addIndex.call(this);
        }

        Tabs.prototype.clickAutoPlay = function () {
            clearInterval(this.timer);
            this.timer = setInterval(function () {
                addIndex.call(this);
            }.bind(this), 1000);
        }

        var tabs = new Tabs('tab1');

        console.log(tabs);

        document.querySelector('.nextPre').onclick = function () {
            tabs.clickNext();
        }


        var tabs2 = new Tabs('tab2');
        document.querySelector('.autoPlay').onclick = function () {
            tabs2.clickAutoPlay();
        }
    })();
</script>

</html>